@import '~components/constants.scss';

.current-company-header {
  display: flex;
  margin-left: 12px;
  margin-right: 12px;
  width: auto;
  box-sizing: border-box;

  .notifications {
    cursor: pointer;
    color: var(--black-alpha-1);
    font-size: 16px;

    .bell {
      display: flex;
      align-items: center;
      cursor: pointer;
      height: 24px;

      &:hover {
        background: $grey_light;
        border-radius: var(--default-border-radius);
      }

      &.disabled {
        color: $red;
      }
      &.sleep {
        color: $yellow;
      }
    }
  }

  .current-company {
    flex: 1;
    overflow: hidden;
    height: 48px;
    cursor: pointer;

    .name {
      display: flex;
      cursor: pointer;

      .text {
        height: 22px;
        font-size: 16px;
        color: var(--secondary);
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 700;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .icon {
        height: 22px;
        line-height: 22px;
        font-size: 20px;
        min-width: 24px;
        margin-left: -4px;
        color: var(--secondary);
      }
    }

    .user-info {
      display: flex;
      color: var(--black-alpha-2);
      align-items: center;

      .status {
        position: relative;
        display: inline-block;
        margin-right: 4px;
        width: 8px;
        height: 8px;
        border-radius: 6px;
        background: $green;
        border: 1px solid $grey_background;

        &.grey {
          background: $grey_dark;
        }
        &.red {
          background: $red;
        }
      }

      .icon {
        display: flex;
        align-items: center;
        padding-right: 2px;
        margin-right: 4px;
        cursor: pointer;
      }

      .text {
        font-size: 14px;
        line-height: 20px;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .emoji-container {
        margin-right: 4px;
        display: inline-block;
      }
    }
  }
}

.loading_render {
  .current_user {
    pointer-events: none;
    .user_head {
      background: #dfdfdf !important;
    }
    .user_head,
    .name,
    .subname {
      background: $grey_light;
      animation-duration: 1s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-name: placeHolderShimmer;
      animation-timing-function: linear;
      background: $grey_light;
      background: linear-gradient(to right, $grey_light 8%, #f2f2f2 18%, $grey_light 33%);
      background-size: 800px 104px;
      & > * {
        display: none !important;
      }
    }
    .name {
      background: #dfdfdf !important;
      height: 16px;
      border-radius: var(--default-border-radius-large);
      width: 70%;
      margin-top: 2px;
    }
    .subname {
      margin-top: 6px;
      height: 16px;
      border-radius: var(--default-border-radius-large);
      width: 90%;
    }
  }
}
